<template>
  <!-- 404错误页面模板 -->
  <div class="back">
    <!-- 显示404标题 -->
    <h1>404 </h1>
    <!-- 显示错误信息 -->
    <p class="zoom-area"><b>Not found</b> / 请求页面不存在</p>
    <!-- 错误数字容器 -->
    <section class="error-container">
      <!-- 数字4的样式 -->
      <span class="four"><span class="screen-reader-text">4</span></span>
      <!-- 数字0的样式 -->
      <span class="zero"><span class="screen-reader-text">0</span></span>
      <!-- 数字4的样式 -->
      <span class="four"><span class="screen-reader-text">4</span></span>
    </section>
    <!-- 返回首页的链接 -->
    <div class="link-container">
      <router-link to="/" class="more-link">返 回 首 页</router-link>
    </div>
  </div>
</template>


<script>
export default {
  name: "404"
}
</script>


<style scoped>
/* 页面背景样式 */
.back{
  background-color: #e6b69e; /* 背景颜色 */
  height: 100vh; /* 视口高度 */
  overflow: hidden; /* 隐藏溢出内容 */
}

/* 错误数字容器样式 */
.error-container {
  text-align: center; /* 文本居中 */
  font-size: 106px; /* 字体大小 */
  font-family: 'Catamaran', sans-serif; /* 字体 */
  font-weight: 800; /* 字体粗细 */
  margin: 70px 15px; /* 外边距 */
}
/* 错误数字通用样式 */
.error-container > span {
  display: inline-block; /* 行内块元素 */
  position: relative; /* 相对定位 */
}
/* 数字4的特定样式 */
.error-container > span.four {
  width: 136px; /* 宽度 */
  height: 43px; /* 高度 */
  border-radius: 999px; /* 圆角边框 */
  /* 背景渐变效果 */
  background:
      linear-gradient(140deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.07) 43%, transparent 44%, transparent 100%),
      linear-gradient(105deg, transparent 0%, transparent 40%, rgba(0, 0, 0, 0.06) 41%, rgba(0, 0, 0, 0.07) 76%, transparent 77%, transparent 100%),
      linear-gradient(to right, #d89ca4, #e27b7e); /* 右侧渐变 */
}
/* 数字4的伪元素样式 */
.error-container > span.four:before,
.error-container > span.four:after {
  content: ''; /* 生成内容为空 */
  display: block; /* 块级元素 */
  position: absolute; /* 绝对定位 */
  border-radius: 999px; /* 圆角边框 */
}
/* 数字4左侧伪元素样式 */
.error-container > span.four:before {
  width: 43px; /* 宽度 */
  height: 156px; /* 高度 */
  left: 60px; /* 左侧偏移 */
  bottom: -43px; /* 底部偏移 */
  /* 背景渐变效果 */
  background:
      linear-gradient(128deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.07) 40%, transparent 41%, transparent 100%),
      linear-gradient(116deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.07) 50%, transparent 51%, transparent 100%),
      linear-gradient(to top, #99749D, #B895AB, #CC9AA6, #D7969E, #E0787F); /* 上方渐变 */
}
/* 数字4右侧伪元素样式 */
.error-container > span.four:after {
  width: 137px; /* 宽度 */
  height: 43px; /* 高度 */
  transform: rotate(-49.5deg); /* 旋转角度 */
  left: -18px; /* 左侧偏移 */
  bottom: 36px; /* 底部偏移 */
  background: linear-gradient(to right, #99749D, #B895AB, #CC9AA6, #D7969E, #E0787F); /* 右侧渐变 */
}

/* 数字0的特定样式 */
.error-container > span.zero {
  vertical-align: text-top; /* 垂直对齐方式 */
  width: 156px; /* 宽度 */
  height: 156px; /* 高度 */
  border-radius: 999px; /* 圆角边框 */
  /* 背景渐变效果 */
  background: linear-gradient(-45deg, transparent 0%, rgba(0, 0, 0, 0.06) 50%,  transparent 51%, transparent 100%),
  linear-gradient(to top right, #99749D, #99749D, #B895AB, #CC9AA6, #D7969E, #ED8687, #ED8687);
  overflow: hidden; /* 隐藏溢出内容 */
  animation: bgshadow 5s infinite; /* 背景阴影动画 */
}
/* 数字0的伪元素样式 */
.error-container > span.zero:after {
  content: ''; /* 生成内容为空 */
  display: block; /* 块级元素 */
  position: absolute; /* 绝对定位 */
  border-radius: 999px; /* 圆角边框 */
  width: 70px; /* 宽度 */
  height: 70px; /* 高度 */
  left: 43px; /* 左侧偏移 */
  bottom: 43px; /* 底部偏移 */
  background: #FDFAF5; /* 背景颜色 */
  box-shadow: -2px 2px 2px 0 rgba(0, 0, 0, 0.1); /* 阴影效果 */
}

/* 屏幕阅读器隐藏文本样式 */
.screen-reader-text {
  position: absolute;
  top: -9999em;
  left: -9999em;
}

/* 背景阴影动画关键帧 */
@keyframes bgshadow {
  0% {
    box-shadow: inset -160px 160px 0 5px rgba(0, 0, 0, 0.4);
  }
  45% {
    box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.1);
  }
  55% {
    box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.1);
  }
  100% {
    box-shadow: inset 160px -160px 0 5px rgba(0, 0, 0, 0.4);
  }
}

/* 标题样式 */
h1 {
  text-align: center; /* 文本居中 */
  margin: 30px 15px; /* 外边距 */
}
/* 错误信息样式 */
.zoom-area {
  max-width: 490px; /* 最大宽度 */
  margin: 30px auto 30px; /* 外边距 */
  font-size: 19px; /* 字体大小 */
  text-align: center; /* 文本居中 */
}
/* 链接容器样式 */
.link-container {
  text-align: center; /* 文本居中 */
}
/* 返回首页链接样式 */
.more-link {
  text-transform: uppercase; /* 文本转换为大写 */
  font-size: 16px; /* 字体大小 */
  background-color: #ED8687; /* 背景颜色 */
  padding: 15px 20px; /* 内边距 */
  border-radius: 10px; /* 圆角边框 */
  color: #fff; /* 文字颜色 */
  display: inline-block; /* 行内块元素 */
  line-height: 1.5; /* 行高 */
  text-decoration: none; /* 移除下划线 */
  margin-top: 50px; /* 上边距 */
  letter-spacing: 1px; /* 字母间距 */
  width: 200px; /* 宽度 */
}
/* 链接悬停效果 */
.more-link:hover{
  background-color: #c76a70; /* 悬停背景颜色 */
  color: #ffebcc; /* 悬停文字颜色 */
  transform: scale(1.1); /* 放大效果 */
  transition: color 0.3s, background-color 0.3s, transform 0.3s; /* 过渡效果 */
}
</style>
